<template>
  <div class="create_reserve">
    <div class="main_content">
      <div class="dynamic_reserve">
        <div class="dynamic_reserve_type">直播预约</div>
        <div class="dynamic_reserve_form">
          <div class="dynamic_reserve_form_title">发起新预约</div>
          <div class="dynamic_reserve_form_item title">
            <div class="sel_input sel_border">
              <input
                type="text"
                maxlength="14"
                placeholder="请填写预约标题"
                class="sel_input_inner"
                placeholder-style="color:#99a2aa"
                v-model="reserveTitle"
              />
              <span class="self_input_suffix">
                <span class="self_input_suffix_inner">
                  <span class="self_input_count"
                    >{{ reserveTitle.length }}/14</span
                  >
                </span>
              </span>
            </div>
          </div>
          <div class="dynamic_reserve_form_item datetime">
            <div class="date_picker">
              <div class="date_input" @click.stop="() => {}">
                <input
                  type="text"
                  placeholder="选择日期"
                  v-model="reserveDate"
                  @click="openPanel('datePanelActive')"
                  @blur="checkTime({ date: reserveDate })"
                />
                <i
                  class="calendar"
                  @click="openPanel('datePanelActive')"
                  :class="reserveDate ? 'active' : ''"
                ></i>
                <div
                  class="date_panel"
                  v-show="panelActive == 'datePanelActive'"
                >
                  <div class="ym">
                    <div class="button" @click.stop="setMonth('-')">
                      <span class="arrow left"></span>
                    </div>
                    <span>{{ year }}年 {{ month }}月</span>
                    <div class="button" @click.stop="setMonth('+')">
                      <span class="arrow right"></span>
                    </div>
                  </div>
                  <div class="md">
                    <div class="week">
                      <span>日</span>
                      <span>一</span>
                      <span>二</span>
                      <span>三</span>
                      <span>四</span>
                      <span>五</span>
                      <span>六</span>
                    </div>
                    <div class="days">
                      <div
                        class="day"
                        v-for="day in daysArr"
                        :class="[
                          year == selectYear &&
                          month == selectMonth &&
                          day == selectDay
                            ? 'active'
                            : '',
                          dayDisable(day) ? 'disable' : '',
                        ]"
                        @click="selectTime({ day })"
                      >
                        {{ day }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="scroll_input" @click.stop="() => {}">
                <div class="s_input_wrap" @click="openPanel('hourPanelActive')">
                  <input type="number" class="s_input" v-model="selectHour" />
                </div>
                <span
                  class="arrow_down"
                  @click="openPanel('hourPanelActive')"
                ></span>
                <span class="s_label">时</span>
                <div class="s_panel" v-show="panelActive == 'hourPanelActive'">
                  <div
                    class="s_item"
                    v-for="h in 24"
                    v-if="h > hour"
                    :class="selectHour == h - 1 ? 'active' : ''"
                    @click="selectTime({ h: h - 1 })"
                  >
                    {{ h - 1 }}
                  </div>
                </div>
              </div>
              <div class="scroll_input" @click.stop="() => {}">
                <div class="s_input_wrap" @click="openPanel('mdPanelActive')">
                  <input type="number" class="s_input" v-model="selectMinute" />
                </div>
                <span
                  class="arrow_down"
                  @click="openPanel('mdPanelActive')"
                ></span>
                <span class="s_label">分</span>
                <div class="s_panel" v-show="panelActive == 'mdPanelActive'">
                  <div
                    class="s_item"
                    v-for="m in 60"
                    v-if="m > minute"
                    :class="selectMinute == m - 1 ? 'active' : ''"
                    @click="selectTime({ m: m - 1 })"
                  >
                    {{ m - 1 }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="dynamic_reserve_about">
          <a href="javascript:;" class="link">
            <i class="iconfont icon-bangzhu_o"></i>关于预约</a
          >
        </div>
      </div>
    </div>
    <div class="button_bar">
      <div class="button" @click="close">取消</div>
      <div class="button" @click="save">发起预约</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reserveTitle: "",
      reserveDate: "",
      reserveHour: "",
      reserveMinute: "",
      panelActive: "",
      lastInputDate: "",

      year: 0,
      month: 0,
      day: 0,
      hour: 0,
      minute: 0,

      currentYear: 0,
      currentMonth: 0,
      currentDay: 0,
      currentHour: 0,
      currentMinute: 0,

      selectYear: 0,
      selectMonth: 0,
      selectDay: 0,
      selectHour: null, //
      selectMinute: null, //

      docCB: null, //页面监听回调
    };
  },
  props: {
    maxRegularTime: {
      typeof: Number,
      required: false,
    },
    reserveContent: {
      typeof: Object,
      required: true,
    },
  },
  created() {
    this.getNowDate();
  },
  mounted() {
    if (this.reserveContent) {
      Object.keys(this.reserveContent).forEach((key) => {
        this[key] = this.reserveContent[key];
      });
      this.selectHour = Number(this.reserveHour);
      this.selectMinute = Number(this.reserveMinute);
      this.lastInputDate = this.reserveDate;
      let date = this.reserveDate.split("-");
      this.selectYear = Number(date[0]);
      this.selectMonth = Number(date[1]);
      this.selectDay = Number(date[2]);
      this.selectTime({ day: this.selectDay });
    }
  },
  methods: {
    close() {
      this.$emit("close");
      this.reserveDate = "";
      this.reserveTitle = "";
      this.selectHour = null;
      this.selectMinute = null;
    },
    save() {
      if (!this.reserveTitle) {
        this.$util.Tips({
          title: "请填写预约标题",
        });
        return;
      }
      if (
        !this.checkTime({
          date: this.reserveDate,
          h: this.selectHour,
          m: this.selectMinute,
        })
      ) {
        this.$util.Tips({
          title: "请正确填写日期",
        });
        return;
      }
      this.reserveHour = this.selectHour.toString();
      this.reserveMinute = this.selectMinute.toString();
      let data = {
        reserveTitle: this.reserveTitle,
        reserveDate: this.reserveDate,
        reserveHour: this.reserveHour,
        reserveMinute: this.reserveMinute,
      };
      this.$emit("save", data);
    },
    // 文档单次监听回调
    documentAddEventListen(type, cb) {
      this.docCB = () => {
        cb();
        document.documentElement.removeEventListener(type, this.docCB);
      };
      document.documentElement.addEventListener(type, this.docCB);
    },
    documentRemoveEventListen(type, cb) {
      if (cb) document.documentElement.removeEventListener(type, cb);
    },
    checkTime({ date = null, h = null, m = null } = {}) {
      let dateReg = new RegExp(/^\d{4}-\d{1,2}-\d{1,2}$/);
      let dateFlag = true;
      let dateArr = date.split("-");
      let year = Number(dateArr[0]);
      let month = Number(dateArr[1]);
      let day = Number(dateArr[2]);
      if (date) {
        if (dateReg.test(date)) {
          // 如果年比当前年小，则错误
          if (year < this.currentYear) {
            dateFlag = false;
          }
          // 如果年等于当前年，则判断月份
          else if (year == this.currentYear) {
            if (month < this.currentMonth || month > 12) {
              dateFlag = false;
            }
            // 如果不是当前月
            else if (month != this.currentMonth) {
              switch (month) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                  if (day > 31) dateFlag = false;
                  break;
                case 4:
                case 6:
                case 9:
                case 11:
                  if (day > 30) dateFlag = false;
                  break;
                default:
                  if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
                    if (day > 29) dateFlag = false;
                  } else {
                    if (day > 28) dateFlag = false;
                  }
                  break;
              }
            } else {
              if (day < this.currentDay) {
                dateFlag = false;
              }
            }
          }
          // 如果年大于当前年，则判断月份
          else if (year > this.currentYear) {
            if (month < 0 || month > 12) {
              dateFlag = false;
            } else {
              switch (month) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                  if (day > 31) dateFlag = false;
                  break;
                case 4:
                case 6:
                case 9:
                case 11:
                  if (day > 30) dateFlag = false;
                  break;
                default:
                  if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
                    if (day > 29) dateFlag = false;
                  } else {
                    if (day > 28) dateFlag = false;
                  }
                  break;
              }
            }
          }
        } else {
          dateFlag = false;
        }
      } else {
        dateFlag = false;
      }
      if (dateFlag) {
        this.reserveDate = `${year}-${month}-${day}`;
        this.lastInputDate = this.reserveDate;
      } else {
        this.reserveDate = this.lastInputDate;
        return false;
      }
      if (h == null || h < this.hour || h > 23) return false;
      if (m == null || m < this.minute || m > 59) return false;
      return true;
    },
    // 展开选框
    openPanel(panelActive) {
      if (panelActive) {
        this.$set(this, "panelActive", panelActive);
      }
      this.documentAddEventListen("click", this.closePanel);
    },
    // 关闭选框
    closePanel() {
      this.documentRemoveEventListen("click", this.docCB);
      this.$set(this, "panelActive", "");
    },
    // 计算当前时间
    getNowDate() {
      let time = new Date();

      this.currentYear = time.getFullYear();
      this.year = this.currentYear;
      this.selectYear = this.year;

      this.currentMonth = time.getMonth() + 1;
      this.month = this.currentMonth;
      this.selectMonth = this.month;

      this.currentDay = time.getDate();
      this.day = this.currentDay;
      this.selectDay = this.day;

      this.currentHour = time.getHours();

      this.currentMinute = time.getMinutes();
    },
    // 增减月份
    setMonth(type) {
      if (type == "-") {
        this.month--;
        if (this.month < 1) {
          this.month = 12;
          this.year--;
        }
      } else if (type == "+") {
        this.month++;
        if (this.month > 12) {
          this.month = 1;
          this.year++;
        }
      }
    },
    // 设置日期
    setDate() {
      this.reserveDate = `${this.selectYear}-${this.selectMonth}-${this.selectDay}`;
    },
    // 选择时间
    selectTime({ day = null, h = null, m = null } = {}) {
      if (day && this.dayDisable(day)) return;
      if (typeof h == "number") {
        this.selectHour = h;
      }
      if (typeof m == "number") {
        this.selectMinute = m;
      }
      if (day) {
        this.selectYear = this.year;
        this.selectMonth = this.month;
        this.selectDay = day;
        // 计算时间区间
        let dateNum =
          new Date(`${this.year}-${this.month}-${day}`).getTime() / 1000; //当前选中的值对应秒
        let curDateNum =
          new Date(
            `${this.currentYear}-${this.currentMonth}-${this.currentDay}`
          ).getTime() / 1000; //当前日期对应秒

        if (dateNum > curDateNum) {
          this.hour = 0;
          this.minute = 0;
        } else {
          this.hour = this.currentHour;
          this.minute = this.currentMinute;
          if (this.selectMinute != null) {
            if (
              this.selectHour < this.currentHour &&
              this.selectMinute < this.currentMinute
            ) {
              this.selectMinute = this.currentMinute;
            }
          }
          if (this.selectHour != null && this.selectHour < this.currentHour) {
            this.selectHour = this.currentHour;
          }
        }
        this.setDate();
        this.lastInputDate = this.reserveDate;
      }
      this.closePanel();
    },
    dayDisable(day) {
      if (typeof day == "number") {
        // 计算可选区间
        let dateNum =
          new Date(`${this.year}-${this.month}-${day}`).getTime() / 1000; //当前日历中的值对应秒
        let curDateNum =
          new Date(
            `${this.currentYear}-${this.currentMonth}-${this.currentDay}`
          ).getTime() / 1000; //当前时间对应秒
        let maxDayNum = curDateNum + this.maxRegularTime * 24 * 60 * 60; //当前时间加上选择范围对应秒
        if (
          typeof this.maxRegularTime == "number" &&
          this.this.maxRegularTime > 0
        ) {
          // 如果设置了可选范围
          if (dateNum >= curDateNum && dateNum <= maxDayNum) {
            return false;
          }
        } else {
          if (dateNum >= curDateNum) {
            return false;
          }
        }
      }
      return true;
    },
  },
  computed: {
    // 计算日期数组
    daysArr() {
      // 计算所在月份1号为周几
      let day = new Date(`${this.year}-${this.month}`).getDay();
      let daysArr = new Array(day).fill(" ");
      let currentMonthDays = 0;
      if (this.month != 2) {
        switch (this.month) {
          case 1:
          case 3:
          case 5:
          case 7:
          case 8:
          case 10:
          case 12:
            currentMonthDays = 31;
            break;
          case 4:
          case 6:
          case 9:
          case 11:
            currentMonthDays = 30;
            break;
        }
      } else if (
        (this.year % 4 == 0 && this.year % 100 != 0) ||
        this.year % 400 == 0
      ) {
        currentMonthDays = 29;
      } else {
        currentMonthDays = 28;
      }
      for (let i = 1; i <= currentMonthDays; i++) {
        daysArr.push(i);
      }
      return daysArr;
    },
  },
};
</script>

<style lang="scss">
* {
  list-style: none;
  padding: 0;
  margin: 0;
}
.create_reserve {
  position: absolute;
  top: 28px;
  left: -8px;
  border: 1px solid #e5e9f0;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.17);
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  z-index: 13;
  .main_content {
    max-height: 400px;
    padding: 20px;
    box-sizing: border-box;
    .dynamic_reserve {
      width: 373px;
      .dynamic_reserve_type {
        font-weight: bold;
        font-size: 16px;
        line-height: 21px;
        margin-bottom: 20px;
      }
      .dynamic_reserve_form {
        .dynamic_reserve_form_title {
          font-size: 14px;
          line-height: 18px;
          margin-bottom: 12px;
        }
        .dynamic_reserve_form_item {
          margin-bottom: 12px;
          .sel_input {
            position: relative;
            font-size: 14px;
            display: inline-block;
            width: 100%;
            overflow: hidden;
            border-radius: 4px;
            box-sizing: border-box;
            .sel_input_inner {
              height: 36px;
              width: 100%;
              line-height: 36px;
              padding: 0 10px;
              display: inline-block;
              border: none;
              outline: none;
              background-color: #fff;
              box-sizing: border-box;
              color: #220000;
              font-size: inherit;
              cursor: pointer;
            }
          }
          .sel_border {
            &::before {
              pointer-events: none;
              content: "";
              width: 200%;
              height: 200%;
              border: 1px solid #e5e9ef;
              border-radius: 8px;
              position: absolute;
              top: 0;
              left: 0;
              transform: scale(0.5);
              transform-origin: 0 0;
              transition: border-color 0.2s;
              box-sizing: border-box;
            }
            &:hover::before {
              border: 1px solid #00a1d6;
            }
          }
          .self_input_suffix {
            position: absolute;
            height: 100%;
            right: 10px;
            bottom: 0;
            top: 0;
            text-align: center;
            color: #c0c4cc;
            pointer-events: none;
            transition: all 0.3s;
            .self_input_suffix_inner {
              pointer-events: all;
              .self_input_count {
                position: relative;
                left: unset;
                top: unset;
                right: unset;
                bottom: unset;
                height: 100%;
                display: inline-flex;
                align-items: center;
                color: #99a2aa;
                font-size: 14px;
              }
            }
          }
          .date_picker {
            display: inline-flex;
            font-family: "Microsoft Yahei", "WenQuanYi Micro Hei",
              "Helvetica Neue", Helvetica, Arial, sans-serif;
            .date_input {
              width: 186px;
              height: 36px;
              line-height: 28px;
              font-size: 13px;
              color: #333;
              position: relative;
              box-sizing: border-box;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              outline: none;
              padding: 0;
              background-color: #fff;
              transition: all 0.2s;
              &::before {
                pointer-events: none;
                content: "";
                width: 200%;
                height: 200%;
                border: 1px solid #e5e9ef;
                border-radius: 8px;
                position: absolute;
                top: 0;
                left: 0;
                transform: scale(0.5);
                transform-origin: 0 0;
                transition: border-color 0.2s;
                box-sizing: border-box;
              }
              &:hover::before {
                border: 1px solid #00a1d6;
              }
              input {
                font-size: 14px;
                box-sizing: border-box;
                padding: 0 0px 0 10px;
                outline: none;
                width: 186px;
                height: 36px;
                color: #220000;
                border: none;
              }
              .calendar {
                position: absolute;
                right: 12px;
                top: 12px;
                display: block;
                width: 12px;
                height: 12px;
                background-image: url("/static/video/rili.png");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                cursor: pointer;
                &.active {
                  background-image: url("/static/video/rili_active.png");
                }
              }
              .date_panel {
                position: absolute;
                left: 0;
                top: 35px;
                z-index: 8;
                box-sizing: content-box;
                width: 247px;
                height: 220px;
                border: 1px solid #e5e9f0;
                border-radius: 4px;
                background-color: #fff;
                font-size: 13px;
                cursor: default;
                .ym {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  border-bottom: 1px solid #e5e9f0;
                  line-height: 30px;
                  font-weight: 600;
                  color: #777;
                  padding: 0 24px;
                  & > * {
                    display: inline-block;
                  }
                  .button {
                    border: none;
                    background-color: none;
                    padding: 5px 8px;
                    cursor: pointer;
                    line-height: 16px;
                    outline: none;
                    .arrow {
                      display: inline-block;
                      height: 8px;
                      width: 8px;
                      margin-bottom: 1px;
                      border-radius: 2px;
                      border-top: 2px solid #777;
                    }
                    .left {
                      border-left: 2px solid #777;
                      transform: rotateZ(-45deg);
                    }
                    .right {
                      border-right: 2px solid #777;
                      transform: rotateZ(45deg);
                    }
                  }
                }
                .md {
                  padding: 6px 12px;
                  .week {
                    display: flex;
                    color: #555;
                    font-weight: 600;
                    & > span {
                      width: 25px;
                      margin-right: 4px;
                      text-align: center;
                      & + span {
                        margin-left: 4px;
                      }
                    }
                  }
                  .days {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    font-size: 12px;
                    .day {
                      display: inline-block;
                      width: 25px;
                      height: 25px;
                      line-height: 25px;
                      margin-right: 4px;
                      margin-left: 4px;
                      text-align: center;
                      box-sizing: border-box;
                      cursor: pointer;
                      &:nth-child(7n + 1) {
                        margin-left: 0;
                      }
                      &:nth-child(7n) {
                        margin-right: 0;
                      }
                      &.disable {
                        cursor: not-allowed;
                        color: #ccc;
                      }
                      &.active {
                        border: 1px solid #00a1d6;
                        border-radius: 4px;
                        color: #00a1d6;
                        font-weight: 600;
                      }
                    }
                  }
                }
              }
            }
            .scroll_input {
              position: relative;
              display: inline-flex;
              align-items: center;
              font-size: 12px;
              margin-left: 12px;
              .s_input_wrap {
                position: relative;
                &::before {
                  pointer-events: none;
                  content: "";
                  width: 200%;
                  height: 200%;
                  border: 1px solid #e5e9ef;
                  border-radius: 8px;
                  position: absolute;
                  top: 0;
                  left: 0;
                  transform: scale(0.5);
                  transform-origin: 0 0;
                  transition: border-color 0.2s;
                  box-sizing: border-box;
                }
                &:hover::before {
                  border: 1px solid #00a1d6;
                }
                .s_input {
                  box-sizing: border-box;
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  outline: none;
                  background-color: #fff;
                  height: 36px;
                  width: 62px;
                  margin-left: 0px;
                  padding: 0 4px 0 0px;
                  text-align: center;
                  line-height: 28px;
                  font-size: 14px;
                  color: #220000;
                  border: none;
                  cursor: pointer;
                  position: unset;
                  transition: 0.2s;
                }
              }
              .arrow_down {
                position: absolute;
                display: inline-block;
                top: 13px;
                left: 44px;
                height: 5px;
                width: 5px;
                border-radius: 2px;
                transition: 0.2s;
                pointer-events: none;
                box-sizing: content-box;
                border-bottom: 2px solid #777;
                border-left: 2px solid #777;
                transform: rotateZ(-45deg);
                &.active {
                  transform: rotateZ(135deg);
                  top: 12px;
                  border-bottom: 2px solid #00a1d6;
                  border-left: 2px solid #00a1d6;
                }
              }
              .s_label {
                margin-left: 6px;
                color: #6d757a;
                font-size: 13px;
              }
              .s_panel {
                z-index: 8;
                position: absolute;
                top: 35px;
                left: 0;
                width: 62px;
                height: 150px;
                border: 1px solid #e5e9f0;
                background-color: #fff;
                font-size: 12px;
                cursor: default;
                overflow-y: scroll;
                &::-webkit-scrollbar {
                  width: 5px;
                  height: 8px;
                  background-color: rgba(1, 1, 1, 0);
                }
                &::-webkit-scrollbar-thumb {
                  background-color: #aaa;
                  border-radius: 4px;
                }
                .s_item {
                  height: 30px;
                  box-sizing: border-box;
                  text-align: center;
                  line-height: 30px;
                  cursor: pointer;
                  color: #6d757a;
                  &.active {
                    color: #00a1d6;
                  }
                  &:hover {
                    color: #00a1d6;
                  }
                }
              }
            }
          }
        }
      }
      .dynamic_reserve_about {
        user-select: none;
        height: 17px;
        font-size: 12px;
        .link {
          color: #00a1d6;
          outline: none;
          text-decoration: none;
          .icon-bangzhu_o {
            margin-right: 5px;
          }
        }
      }
    }
  }
  .button_bar {
    padding: 15px 20px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    &::before {
      content: "";
      width: 100%;
      height: 1px;
      border-bottom: 1px solid #e8ecf1;
      position: absolute;
      bottom: -1px;
      top: 0;
      left: 0;
      transform-origin: 0 0;
      transform: scaleY(0.5);
      z-index: -1;
    }
    .button {
      min-width: 90px;
      padding: 5px;
      text-align: center;
      position: relative;
      color: #505050;
      font-size: 14px;
      border-radius: 4px;
      cursor: pointer;
      & + .button {
        margin-left: 10px;
      }
      &::before {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        border: 1px solid #e8ecf1;
        border-radius: 8px;
        top: 0;
        left: 0;
        z-index: -1;
        transform-origin: 0 0;
      }
      &.active {
        background-color: #00a1d6;
        color: #fff;
      }
      &.no_border::before {
        border: none;
      }
    }
  }
}
</style>